$(function () {
    // ***********************加载用户列表

    let laypage;
    let form;
    let layer;
    layui.use('laypage', function () {
        laypage = layui.laypage;
        form = layui.form;
        layer = layui.layer;

        let data = {
            pagenum: 1,
            pagesize: 2
        }
        // 获取列表
        function list() {
            $.ajax({
                url: `/admin/users`,
                data: data,
                success: function (res) {
                    $('tbody').html('')

                    res.data.forEach(item => {
                        $('tbody').append(`
                    <tr>
                             <td>${item.id}</td>
                             <td>${item.username}</td>
                             <td>${item.nickname}</td>
                             <td>${item.email}</td>
                             <td>
                                 <button type="button" class="layui-btn layui-btn-xs ">
                                     <a style="color: #fff" target="iframeArea" href="./edit.html?id=${item.id}" >编辑</a>
                                 </button>
                                 <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete" index=${item.id}>删除</button>
                                 <button type="button" class="layui-btn layui-btn-xs layui-btn-normal pass" index=${item.id}>重置密码</button>
                             </td>
                         </tr>
                    `)

                    });
                    bar(res.total)
                }

            })
        }
        list()

        // 分页器
        function bar(count) {
            laypage.render({
                elem: 'articlePage', // 注意，这里的 test1 是 ID，不用加 # 号
                count: count, // 数据总数，从服务端得到,
                limit: data.pagesize, // limit限制 每页显示几条数据
                curr: data.pagenum,
                limits: [2, 3, 5, 10], // 下拉框的值，表示每页多少条，选择每页显示几条
                layout: ['prev', 'page', 'next', 'limit', 'skip'], // 辅助
                // 当用户点击页面跳转的时候：
                jump: function (obj, first) {
                    // 用户自己点击 跳转
                    if (first == undefined) {

                        // obj是用户操作后对象数据  obj.curr
                        data.pagenum = obj.curr;
                        data.pagesize = obj.limit
                        // ajax
                        list();

                    }
                }
            });
        }

        // 删除
        $('tbody').on('click', '.delete', function () {
            let id = $(this).attr('index')
            $.ajax({
                url: `/admin/users/${id}`,
                type: 'DELETE',
                success: function (res) {
                    layer.msg(res.message)
                    list()
                }
            })
        })

        // ***********************重置密码的form表单
        let str = `<form id="repwd-form" class="layui-form" style="margin: 15px 30px 0 0">
<!-- 第一行：密码 -->
<div class="layui-form-item">
  <label class="layui-form-label">密码</label>
  <div class="layui-input-block">
    <input type="password" name="password" required lay-verify="required|password" placeholder="请输入新密码" autocomplete="off" class="layui-input password">
  </div>
</div>
<!-- 第二行：确认密码 -->
<div class="layui-form-item">
  <label class="layui-form-label">确认密码</label>
  <div class="layui-input-block">
    <input type="password" required lay-verify="required|same" placeholder="请重复输入新密码" autocomplete="off" class="layui-input">
  </div>
</div>
<!-- 第三行：按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;


        // 点击更改密码
        $('tbody').on('click', '.pass', function () {
            let id = $(this).attr('index')

            // 弹窗
            let open = layer.open({
                type: 1,
                content: str //这里content是一个普通的String
            });

            // 正则
            form.verify({
                password: [
                    /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
                ],
                same: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (value != $('.password').val()) {
                        return '确认密码与新密码不一致';
                    }
                }
            });


            // 更改密码
            $('#repwd-form').on('submit', function (e) {
                e.preventDefault()
                let data = $(this).serialize()


                $.ajax({
                    url: `/admin/users/${id}`,
                    type: `PUT`,
                    data: data,
                    success: function (res) {

                        layer.msg(res.message)
                        layer.close(open)
                        setTimeout(function () {
                            window.parent.location.href = '/login.html'
                        }, 500)
                    }
                })

            })







            /* $.ajax({
                url: `/admin/users/${id}`,
                type: 'DELETE',
                success: function (res) {
                    layer.msg(res.message)
                    list()
                }
            }) */
        })










    });











})